{% extends 'base.html' %}
<!-- 引入自定义样式 -->
<style>
    /* custom.css 文件内容 */
    .custom-badge {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #212529; /* 默认文本颜色 */
        background-color: #e9ecef; /* 轻度灰色背景 */
        border: 1px solid #ced4da; /* 浅边框 */
    }

    /* 鼠标悬停时的样式 */
    .custom-badge:hover {
        color: #fff; /* 文本颜色变为白色 */
        background-color: #007bff; /* 背景颜色变为蓝色 */
    }
</style>

{% block content %}
<!-- 页面标题 -->
<h1>{% block title %}
Zeeker码头的博客
{% endblock %}</h1>

<!-- 遍历 posts 列表 -->
{% for post in posts %}
<!-- 链接到每个帖子的详细页面 -->
<a href="{{ url_for('post', post_id=post['id'])}}">
    <!-- 显示帖子标题 -->
    <h2>{{ post['title'] }}</h2> <!--把posts当成字典用-->
</a>
<!-- 显示帖子创建时间，使用自定义徽章样式 -->
<span class="custom-badge">{{ post['created'] }}</span>
<!-- 链接到编辑帖子的页面 -->
<a href="{{ url_for('edit', post_id=post['id']) }}">
    <!-- 显示“编辑”文本，使用自定义徽章样式 -->
    <span class="custom-badge">编辑</span>
</a>
<!-- 分割线 -->
<hr>
<!-- 显示帖子内容，使用自定义徽章样式 -->
<span class="custom-badge">{{ post['content'] }}</span><hr>
{% endfor %}

{% endblock %}
